<template>
  <div class="related-video">
    <div class="white-btn">
      <i @click="go"></i>
    </div>
    <!-- 视频 -->
    <video
      controls
      v-if="Rvideo && Rvideo.video && Rvideo.video.url"
      :src="Rvideo.video.url"
    ></video>
    <div class="related-box">
      <header v-if="Rvideo.shareInfo.title">
        <div>{{ Rvideo.shareInfo.title }}</div>
      </header>
      <div class="box-img">
          <div class="img" v-if="Rvideo.shareInfo&&Rvideo.shareInfo.img">
              <img :src="Rvideo.shareInfo.img" :alt="Rvideo.shareInfo.name">
          </div>
          <div class="box-name" v-if="Rvideo.shareInfo.content||Rvideo.video.typeDesc">
              <div class="name">{{Rvideo.shareInfo.content}}</div>
              <div class="typeDesc">{{Rvideo.video.typeDesc}}</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      
    };
  },
  computed:{
    //获取vuex里面的值
    ...mapState(["Rvideo"]),
  },
  methods:{
    go(){
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="less" scoped>
.related-video {
  position: relative;
  .white-btn{
    position: absolute;
    top: 10px;
    left: 15px;
    width: 1.5625rem;
    height: 1.5625rem;
    z-index: 20;
    & > i {
      display: inline-block;
      width: 100%;
      height: 100%;
      z-index: 20;
      background: url("../assets/img/white.png") no-repeat;
      background-size: cover;
    }
  }
  video {
    width: 100%;
  }
  .related-box {
    margin-top: 12px;
    background: #fff;
    overflow: hidden;
    header{
        height: 40px;
        display: flex;
        padding: 0 15px;
        align-items: center;
        justify-content: center;
        &>div{
            font-size: 16px;
            color: black;
            font-weight: 500;
        }
    }
  }
  .box-img{
      margin: 20px 15px 0px;
      height: 100px;
      display: flex;
      .img{
          height: 100px;
          img{
              height: 100%;
              border-radius: 5px;
          }
      }
      .box-name{
          flex: 1;
          height: 100px;
          .name{
              width: 100%;
              height: 50px;
              line-height: 30px;
              font-size: 14px;
              font-weight: 400;
          }
          .typeDesc{
              color: #666;
              width: 100%;
              height: 50px;
              line-height: 50px;
              font-size: 14px;
              padding: 0 15px;
          }
      }
  }
}
</style> 